<template>
    <div>
        <el-row :gutter="20" >
          <el-col :span="12">
            <el-card class="w-full h-full " >
                <template #header>
                  <div class="card-header">
                    <span>成年男性身高体重分布</span>
                  </div>
                </template>
                <div id="chart1" style="min-height: 400px">

                </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="w-full h-full" >
                <template #header>
                  <div class="card-header">
                    <span>成年女性身高体重分布</span>
                  </div>
                </template>
                <div id="chart2" style="min-height: 400px">

                </div>
            </el-card>
          </el-col>
        </el-row>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
let adult_man = ref([
  {'age':'20～24','height':172.6,'weight':70.4},
  {'age':'25～29','height':172.1,'wight':72.8},
  {'age': '30～34', 'height': 171.4, 'weight': 74.3},
    {'age': '35～39', 'height': 170.4, 'weight': 74.0},
    {'age': '40～44', 'height': 169.4, 'weight': 73.2},
    {'age': '45～49', 'height': 168.7, 'weight': 72.5},
    {'age': '50～54', 'height': 167.9, 'weight': 71.6},
    {'age': '55～59', 'height': 167.5, 'weight': 71.0}
])
let adult_woman = ref([
    {'age': '20～24', 'height': 160.6, 'weight': 55.7},
    {'age': '25～29', 'height': 159.8, 'weight': 56.7},
    {'age': '30～34', 'height': 159.1, 'weight': 58.0},
    {'age': '35～39', 'height': 158.6, 'weight': 59.1},
    {'age': '40～44', 'height': 158.0, 'weight': 59.7},
    {'age': '45～49', 'height': 157.5, 'weight': 60.1},
    {'age': '50～54', 'height': 157.2, 'weight': 60.8},
    {'age': '55～59', 'height': 157.0, 'weight': 60.7}
])
onMounted(()=>{
    let chart1 = echarts.init(document.getElementById('chart1'));
    let chart2 = echarts.init(document.getElementById('chart2'))
    let options=  {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          data: ['身高', '体重'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: ['20～24', '25～29', '30～34', '35～39', '40～44', '45～49', '50～54', '55～59'],
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '身高（cm）',
            axisLabel: {
              formatter: '{value}',
            },
          },
          {
            type: 'value',
            name: '体重（kg）',
            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        series: [
          {
            name: '身高',
            type: 'bar',
            data: [172.6, 172.1, 171.4, 170.4, 169.4, 168.7, 167.9, 167.5],
          },
          {
            name: '体重',
            type: 'bar',
            yAxisIndex: 1,
            data: [70.4, 72.8, 74.3, 74.0, 73.2, 72.5, 71.6, 71.0],
          },
        ],
      }
      let options2 =  {

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['身高', '体重'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: ['20～24', '25～29', '30～34', '35～39', '40～44', '45～49', '50～54', '55～59'],
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '身高（cm）',
          axisLabel: {
            formatter: '{value}',
          },
        },
        {
          type: 'value',
          name: '体重（kg）',
          axisLabel: {
            formatter: '{value}',
          },
        },
      ],
      series: [
        {
          name: '身高',
          type: 'bar',
          data: [160.6, 159.8, 159.1, 158.6, 158.0, 157.5, 157.2, 157.0],
        },
        {
          name: '体重',
          type: 'bar',
          yAxisIndex: 1,
          data: [55.7, 56.7, 58.0, 59.1, 59.7, 60.1, 60.8, 60.7],
        },
      ],
    }
      chart1.setOption(options);
    chart2.setOption(options2)
})

</script>